
import styled from 'styled-components'
import { ListTable, ListColumn, Group } from '@visactor/react-vtable';
import * as VTable from '@visactor/vtable';

import ReactDOM from "react-dom/client";
// VTable.CustomLayout.Rect
import { SimpleTableColumn } from '.';

const OperationComponent = (props: any) => {
    const { table, row, col, rect, dataValue } = props;

    if (!table || row === undefined || col === undefined) {
        return null;
    }

    const { height, width } = rect || table.getCellRect(col, row);

    const record = table.getRecordByCell(col, row);

    console.log(height, width, record);

    return (
        <Group
            attribute={{
                width: props.width || width,
                height,
                react: {
                    width: props.width || width,
                    height,
                    pointerEvents: true,
                    container: table.bodyDomContainer, // table.headerDomContainer
                    element: props.render && props.render(record)
                }
            }}
        ></Group>
    );
};

export const SimpleVTable = (props: {
    columns: Array<SimpleTableColumn>,
    data: Array<any>,
}) => {

    return (
        <>
            <ListTable
                ReactDOM={ReactDOM}
                records={props.data}
                widthMode={'autoWidth'}
                heightMode={'autoHeight'}
                onDropdownMenuClick={(args) => {
                    console.log('onDropdownMenuClick', args)
                }}
            >
                {
                    props.columns && props.columns.map((column, index) => {
                        // caption={column.name}
                        if (column.render) {
                            return (
                                <ListColumn key={index} field={index} title={column.title || column.name} width={column.size}>
                                    <OperationComponent role={'custom-layout'} render={column.render} width={column.size} />
                                </ListColumn>
                            );
                        }
                        return (
                            <ListColumn key={index} field={index} title={column.title || column.name} width={column.size} />
                        );
                    })
                }
            </ListTable>
        </>
    );
}